<template>
    <div class="zTableCom zTableComMd">
        <OperateBtn v-if="btnList.length" :btnList="btnList" :checkList="checkList"></OperateBtn>
        <el-table
            :data="data"
            ref="singleTableRef"
            :max-height="maxHeight"
            :border="isShowborder"
            @row-click="handleRowClick"
            @select="handleSelectionChange"
            @select-all="handSelectAll"
            style="width: 100%"
            :row-key="rowKey"
            :default-expand-all="defaultExpandAll"
            :tree-props="{children: treeChildren, hasChildren: 'hasChildren'}"
        >
            <el-table-column v-if="checkbox" type="selection" width="50"></el-table-column>
            <el-table-column v-if="index" type="index" width="50"> </el-table-column>
            <el-table-column v-if="expand" type="expand" width="25">
                <template slot-scope="props">
                    <slot
                        name="soltExpand"
                        :data="props.row"
                    ></slot>
                </template>
            </el-table-column>
            <el-table-column
                v-for="item in column"
                :key="item.prop"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :sortable="item.sort"
                :class-name="isShowTip(item.isTip)"
            >
                <template slot="header" v-if="item.isTip">
                    <el-tooltip class="item" effect="dark" :content="item.label" placement="top-start">
                        <span class="overflowTable">{{ item.label }}</span>
                    </el-tooltip>
                </template>
                <template slot="header" v-if="item.iconObj">
                    <el-popover
                        placement="top-start"
                        :title="item.iconObj.title"
                        :width="item.iconObj.width"
                        popper-class="popercomStyle"
                        trigger="hover">
                        <p class="contentP" v-html="item.iconObj.content"></p>
                        <i slot="reference" :class="item.iconObj.iconClass"></i>
                    </el-popover>
                </template>
                <template slot-scope="scope">
                    <slot
                        v-if="item.type === 'slot'"
                        :name="item.slot_name"
                        :data="scope.row"
                    ></slot>
                    <component
                        v-else
                        :data="scope.row"
                        @modifyValue="modifyValue"
                        @getRadio="getRadio"
                        :config="item"
                        :is="!item.type ? 'com-text' : `com-${item.type}`"
                    ></component>
                </template>
            </el-table-column>
        </el-table>
        <Pagination
            v-if="pageConfig && pageConfig.isShowPage"
            @getPageNum="getPageNum"
            :pageConfig="pageConfig"
        ></Pagination>
    </div>
</template>

<script>
    import '../../../packages/src/css/style.scss'
    import Pagination from '../../../packages/components/table/Pagination.vue'
    import OperateBtn from '../../../packages/components/table/OperateBtn.vue'
    //自动化规则，通过type属性自动获取目录组件
    //true会去读取子目录下得文件  false不会读取
    //第3个参数  /index.vue$/ 表示指定读取index.vue得文件
    let modules = {} //引入得组件
    const files = require.context('../../../packages/components/table/control', true, /index.vue$/)
    files.keys().forEach((item) => {
        const key = item.split('/')
        const name = key[1]
        const component = files(item).default
        modules[`com-${name}`] = component
    })
    export default {
        name: 'zTable',
        props: {
            pageConfig: {
                type: Object,
                default: () => ({}),
            },
            btnList:{
                type:Array,
                default:()=>[]
            },
            checkList: {
                type: Array,
                default: () => [],
            },
            column: {
                //显示每一列得字段属性
                type: Array,
                default: () => [],
            },
            data: {
                //table数据
                type: Array,
                default: () => [],
            },
            checkbox: Boolean, //是否显示复选框
            index: Boolean, //是否显示排序
            isShowborder: Boolean, //是否显示边框
            maxHeight: {
                //表格最大高度  number类型
                type: Number,
                //default: () => 200,
            },
            expand:Boolean,
            rowKey:{
                type:String
            },
            defaultExpandAll:Boolean,
            treeChildren:{
                type:String,
                default:'children'
            }
        },
        components: {
            ...modules,
            Pagination,
            OperateBtn
        },
        mounted() {},
        data() {
            return {
                radioArr: [],
                isSelectAll:false,
                handleSelectionObj:{}
            }
        },
        methods: {
            handleSelectionChange(selection,row) {
                let status = selection.length && selection.indexOf(row) !== -1
                //可以使用$refs获取选中的某一个或是选中状态
                this.handleSelectionObj = {
                    row,
                    status
                }
                this.$emit('handleSelectionChange',{
                    row,
                    status
                })
                this.$emit('update:checkList', selection)
            },
            handSelectAll (selection){
                this.isSelectAll = !this.isSelectAll
                if(this.isSelectAll){
                    this.checkRow(selection)
                }else{
                    this.clearRow(this.$refs.singleTableRef.data)
                }
                this.$emit('handSelectAll',{
                    selection,
                    status:this.isSelectAll
                })
                this.$emit('update:checkList', selection)
            },
            // 处理树形全选 start
            // 取消选中递归
            clearRow (data) {
                data.forEach((row) => {
                    row.isCheck = false
                    this.$refs.singleTableRef.toggleRowSelection(row, false)
                    if (row[this.treeChildren]) this.clearRow(row[this.treeChildren])
                })
            },
            // 选中递归
            checkRow (data) {
                data.forEach((row) => {
                    row.isCheck = true
                    this.$refs.singleTableRef.toggleRowSelection(row, true)
                    if (row[this.treeChildren]) this.checkRow(row[this.treeChildren])
                })
            },
            // 处理树形全选 end
            getPageNum(currentPage, pageSize) {
                this.isSelectAll = false
                this.$emit('getPageNum', currentPage, pageSize)
            },
            handleRowClick(row, column, event) {
                this.$emit('rowClick', row, column, event)
            },
            modifyValue(value) {
                this.$emit('modifyValue', value)
            },
            getRadio(selObj, config, radio) {
                this.radioArr = this.radioArr.filter((num, index) => {
                    return num[config.ID] !== selObj[config.ID]
                })
                if (radio !== selObj[config.prop]) {
                    this.radioArr.push({
                        ...selObj,
                        radio_New: radio,
                    })
                }
                this.$emit('getRadio', this.radioArr)
            },
            setCurrent(row) {
                this.$refs.singleTableRef.setCurrentRow(row)
            },
            getElRef() {
                return this.$refs.singleTableRef
            },
            isShowTip (tip){
                return tip ? 'headTipClass' : ''
            }
        },
    }
</script>

<style lang="scss">
    .zTableComMd {
        .el-table__body,
        .el-table__header {
            margin: 0;
        }
        .el-table__cell {
            border: 0;
        }
        ::v-deep .el-table th.headTipClass>.cell{
            display: flex;
            align-items: center;
        }
        .overflowTable {
            width: 90%;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    .popercomStyle{
        .el-popover__title{
            color: #333;
            font-size: 14px;
        }
        .contentP{
            color: #666;
            font-size: 12px;
        }
        
    }
</style>
